<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue语法初体验</title>
    <!--1、导入vue.js，在window全局中就有了vue的构造函数（就和导入jQuery，window全局就有$可以使用一样）-->
    <script src="../js/vue_2.7.8.js" ></script>
</head>
<body>

<!--2、写希望让vue控制的html区域-->
<div id="app">
    <p style="color: red">声明过滤器使用「|」（管道符）,后面跟过滤器的名称</p>
    <span>hi,{{name | f1}}</span>
</div>

<div id="app2">
    <p style="color: red">声明过滤器使用「|」（管道符）,后面跟过滤器的名称</p>
    <span>hi,{{name | f1}}</span>
</div>

</body>
</html>
<script>
    //定义全局过滤器(如果私有过滤器与全局过滤器名称一样，只调用私有过滤器)
    Vue.filter('f1',(str)=>{
        return "法外狂徒-"+str;
    });
    //3.创建vue对象，并渲染dom
    const vm1 = new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el:"#app",
        //data是要渲染的数据
        data:{
            name:'张三'
        },
        //定义过滤器（注：过滤器中一定要有返回值）
        filters:{
            f1(val){
                return '法外狂徒，'+val;
            }
        }
    });

    const vm2 = new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el:"#app2",
        //data是要渲染的数据
        data:{
            name:'李四'
        },
        //定义过滤器（注：过滤器中一定要有返回值）
        filters:{
        }
    });

</script>
